<template>
	<div>
		<vCharts :style="{height: height+'px'}" :option="arr" @click="handleClick" :autoresize="true" />
	</div>
</template>

<script lang="ts" setup>
	import vCharts from 'vue-echarts'
	const { height, option } = defineProps({
		height: {
			type: String,
			default: '340'
		},
		option: {
			type: [String, Array],
			default: () => []
		}
	})
	const handleClick = (val : any) => {
		// console.log('handleClick',val)
	}
	const arr = ref({
        color:["#0000FF",'#9A60B4','#f9c956','#ef6567','#5845ec','#0cb5fd',"#70DBDB","#FF6EC7","#CC0000","#FFFF00"],
		title: {
			text: option.warehouse_name,
			// subtext: `库存：${option.count}${option.unit_name}`,
			textStyle: {
				"fontSize": 14,
			},
			left: 'left'

		},
		tooltip: {
			trigger: 'item',
			formatter: (params : any) => {
				var arr = ''
				if (params.data.value == 0) {
					return params.data.name + ': 0' + params.data.unit_name
				} else {
					
					for (let i = 0; i < params.data.spec.length; i++) {
						arr += params.data.spec[i]?.name + params.data.spec[i]?.spec + ' ' + params.data.spec[i]?.quantity + params.data.spec[i]?.unit_name + '<br>'
					}
					
					return arr
				}

			}
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: '50%',
				data: option.list,
				center: ['50%', '60%'],
				// labelLine: {    //图形外文字线
				// 	normal: {
				// 		length: 35,
				// 		length2: 80
				// 	}
				// },
				// label: {
				// 	normal: {
				// 		textStyle:{
				// 			"fontSize": 12,
				// 			color:'#000',
				// 		},
				// 		formatter(param : any) {
				// 			return param.name + ' \n ' + param.value + param.data.unit_name
				// 		},
				// 		borderWidth: 20,
				// 		borderRadius: 4,
				// 		padding: [0, -70],          //文字和图的边距
				// 		rich: {
				// 			a: {
				// 				color: '#333',
				// 				fontSize: 12,
				// 				lineHeight: 30
				// 			},
				// 			b: {                        //name 文字样式
				// 				fontSize: 12,
				// 				lineHeight: 30,
				// 				color: '#CDCDD0',
				// 			},
				// 			c: {                   //value 文字样式
				// 				fontSize: 12,
				// 				lineHeight: 30,
				// 				color: '#63BF6A',
				// 				align: "center"
				// 			}
				// 		}
				// 	}
				// },
				label: {
				        show: true,
						textStyle:{
							"fontSize": 12,
							color:'#000',
						},
				        formatter(param:any) {
							
				          return param.name + ' (' + param.value + param.data.unit_name +')';
				        }
				      },
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				},

			}
		]
	})
</script>

<style>
</style>